/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
// 多处使用，封装函数
async function setChannelList() {
  const res = await axios({
    url: '/v1_0/channels'
  });
  const htmrStr = '<option value="" selected>请选择文章频道</option>' + res.data.channels.map(item => `<option value="${item.id}" >${item.name}</option>`).join('');
  document.querySelector('.form-select').innerHTML = htmrStr;
}
// 网页运行后默认调用
setChannelList();

/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
document.querySelector('.img-file').addEventListener('change', async e => {
  const file = e.target.files[0];
  const fd = new FormData();
  fd.append('image', file);
  const res = await axios({
    url: '/v1_0/upload',
    method: 'POST',
    data: fd
  });
  // console.log(res);

  // 切换的是容器的显示隐藏，图片url随时可以更换，不是图片覆盖
  const imgUrl = res.data.url;
  document.querySelector('.rounded').src = imgUrl;
  document.querySelector('.rounded').classList.add('show');
  document.querySelector('.place').classList.add('hide');
})
// 点击img可以重新选择封面
// img点击，用JS触发文件选择元素click事件方法
document.querySelector('.rounded').addEventListener('click', () => {
  // 点击事件就能进入文件选择，选择完毕触发change事件
  document.querySelector('.img-file').click();
}) 

/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
document.querySelector('.send').addEventListener('click', async e => {
  // 因为后续复用同一按钮，所以需要添加判断
  if(e.target.innerHTML !== '发布') return;
  const form = document.querySelector('.art-form');
  const data = serialize(form, {hash: true, empty: true});
  // 发布文章不需要id属性，可以删除掉，id是为了后续编辑使用
  delete data.id;
  data.cover = {
    // 如果src为undefined，后台会自己处理
    type: document.querySelector('.rounded').src ? 1 : 0, // 封面类型
    images: [document.querySelector('.rounded').src] // 封面图片url网址
  }
  // console.log(data);
  
  try {
    // 提交
    const res = await axios({
      url: '/v1_0/mp/articles',
      method: 'POST',
      data
    });
    // 调用警告框
    myAlert(true, '发布成功');

    // 重置跳转
    form.reset();
    // 封面不是表单元素，需要手动清空
    document.querySelector('.rounded').src = '';
    document.querySelector('.rounded').classList.remove('show');
    document.querySelector('.place').classList.remove('hide');
    // 编辑器内容清空需要看插件文档，textarea表单主要是隐式的保存编辑器内容
    // 引入了editor.js的文件，里面有一个editor指示当前的编辑器，使用其内置方法将即可
    editor.setHtml();

    setTimeout(() => {
      location.href = '../content/index.html';
    }, 1000);
  } catch(error) {
    myAlert(false, error.response.data.message);
  }
})

/**
 * 目标4：编辑-回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */

;(function() {
  const paramsStr = location.search;
  const params = new URLSearchParams(paramsStr);
  params.forEach( async (value, key) => {
    if(key === 'id') {
      // 需要编辑文章
      // 如果没有id，显示html的默认数据，不会修改
      document.querySelector('.title span').innerHTML = '修改文章';
      document.querySelector('.send').innerHTML = '修改';
      // 回显文章
      const res = await axios({
        url: `/v1_0/mp/articles/${value}`
      });

      // 组织需要的数据对象，便于后续回显
      // 属性名和标签的属性名一直，便于查找
      const dataObj = {
        channel_id: res.data.channel_id,
        title: res.data.title,
        rounded: res.data.cover.images[0],
        content: res.data.content,
        id: res.data.id
      }
      // 遍历映射
      Object.keys(dataObj).forEach(key => {
        if(key === 'rounded') {
          // 封面设置
          if(dataObj[key]) {
            // 有封面
            document.querySelector('.rounded').src = dataObj[key];
            document.querySelector('.rounded').classList.add('show');
            document.querySelector('.place').classList.add('hide');
          }
        } else if(key === 'content') {
          // 先给编辑器赋值显示，内容是带html标签的元素，编辑器内部自己解析
          editor.setHtml(dataObj[key]);
        } else {
          // 隐藏的文本域也要同步编辑器内容
          document.querySelector(`[name=${key}]`).value = dataObj[key];
        }
      })
    }
  })
})();
/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
document.querySelector('.send').addEventListener('click', async e => {
  if(e.target.innerHTML !== '修改') return;
  // 修改文章
  const form = document.querySelector('.art-form');
  const data = serialize(form, {hash: true, empty: true});
  // console.log(data);
  try {
    // 提交修改
    const res = await axios({
      url: `/v1_0/mp/articles/${data.id}`,
      method: 'PUT',
      data: {
        ...data,
        cover: {
          // 如果为undefined，后台会自己处理
          type: document.querySelector('.rounded').src ? 1 : 0,
          images: [document.querySelector('.rounded').src]
        }
      }
    })
    // console.log(res);
    myAlert(true, '修改成功');

    // 重置跳转
    form.reset();
    // 封面不是表单元素，需要手动清空
    document.querySelector('.rounded').src = '';
    document.querySelector('.rounded').classList.remove('show');
    document.querySelector('.place').classList.remove('hide');
    // 编辑器内容清空需要看插件文档，textarea表单主要是隐式的保存编辑器内容
    // 引入了editor.js的文件，里面有一个editor指示当前的编辑器，使用其内置方法将即可
    editor.setHtml();

    setTimeout(() => {
      location.href = '../content/index.html';
    }, 1000);
  } catch(error) {
    myAlert(false, error.response.data.message);
  }
})